<script setup >
import { ref } from "vue";
import { Search as SearchOutlined } from "@element-plus/icons-vue";
const tableData = ref(null);
const selected1 = ref(null);
const options1 = [
  { value: "选项1", label: "黄金糕" },
  { value: "选项2", label: "双皮奶" },
  { value: "选项3", label: "蚵仔煎" },
  { value: "选项4", label: "龙须面" },
  { value: "选项5", label: "北京烤鸭" },
];
const selected2 = ref();
const filteredOptions2 = ref([]);
const updateSecondDropdown = () => {
  filteredOptions2.value = options1.filter(
    (option) => option.value !== selected1.value
  );
};
const exportData = () => {
  console.log("导出数据");
};
</script>




<template >
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: #fff;">
        <div
          class="common-layout-header"
          style="display: flex; justify-content: space-between"
        >
          <div class="common-layout-header-title" style="font-size:20px">学员进度</div>
          <div class="common-layout-header-button">
            <el-select
              v-model="selected1"
              @change="updateSecondDropdown"
              style="width: 100px"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-select v-model="selected2" style="width: 100px">
              <el-option
                v-for="item in filteredOptions2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>

            <el-button type="primary" @click="exportData" style="background-color: red; border-style: none;">导出</el-button>

            <!-- 使用自定义样式的按钮 -->
            
              <div class="icon-box">
                <el-icon>
                  <SearchOutlined />
                </el-icon>
              </div>
        
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          ></el-table-column>
          <el-table-column prop="course" label="课程"></el-table-column>
          <el-table-column prop="progress" label="进度"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>
  
  
  
  
  <style scoped>
.common-layout-header {
   height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.common-layout-header-button {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* 调整盒子的宽度 */
  height: 32px; /* 调整盒子的高度 */
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 4px; /* 边框圆角 */
  background-color: #fff; /* 背景颜色 */
}

.icon-box:hover{
  cursor: pointer;
}
</style>